<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'

const logoUrl = "testlogo.png"

</script>

<template>
<!--  <el-row class="yuyuan-header">-->
<!--    <el-col :span="4" style="background-color: lightblue">logo</el-col>-->
<!--    <el-col :span="16"></el-col>-->
<!--    <el-col :span="4">用户头像</el-col>-->
<!--  </el-row>-->
<!--  <el-row class="yuyuan-main">-->
<!--    <el-col :span="4" class="yuyuan-sidebar">-->
<!--      -->
<!--    </el-col>-->
<!--    <el-col :span="20" class="yuyuan-content">-->
<!--      <RouterView />-->
<!--    </el-col>-->
<!--  </el-row>-->
  <el-container>
    <el-header class="yuyuan-header">
      <div class="logo-box">
        <el-image style="width: 100%; height: 100%" :src="logoUrl" fit="cover" />
      </div>
    </el-header>
    <el-container >
      <el-aside width="200px" class="yuyuan-sidebar">
        <el-menu router default-active="/">
          <el-menu-item index="/">
            <el-icon><Sunrise /></el-icon>
            <span>Home</span>
          </el-menu-item>
          <el-menu-item index="/gift">
            <el-icon><Present /></el-icon>
            <span>gift</span>
          </el-menu-item>
          <el-menu-item index="/about">
            <el-icon><CollectionTag /></el-icon>
            <span>about</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-container>
        <el-main class="yuyuan-content">
          <RouterView />
        </el-main>
        <el-footer class="yuyuan-footer">
          花儿是自由的，希望你也是~
        </el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<style lang="scss" scoped>
.yuyuan-header{
  height: 10vh;
  background-color: steelblue;
  display: flex;
  align-items: center;
  .logo-box{
    width: 7vh;
    height: 7vh;
    border-radius: 3.5vh;
    overflow: hidden;
  }
}
.yuyuan-sidebar{
  height: 90vh;
  background-color: #dc9d66;
}
.yuyuan-content{
  height: 84vh;
  background-color: #faf4ef;
}
.yuyuan-footer{
  height: 6vh;
  background-color: peachpuff;
  display: flex;
  justify-content: center;
  align-items: center;
  color: dimgray;
  font-size: 0.8rem;
}



header {
  line-height: 1.5;
  max-height: 100vh;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

nav {
  width: 100%;
  font-size: 12px;
  text-align: center;
  margin-top: 2rem;
}

nav a.router-link-exact-active {
  color: var(--color-text);
}

nav a.router-link-exact-active:hover {
  background-color: transparent;
}

nav a {
  display: inline-block;
  padding: 0 1rem;
  border-left: 1px solid var(--color-border);
}

nav a:first-of-type {
  border: 0;
}

//@media (min-width: 1024px) {
//  header {
//    display: flex;
//    place-items: center;
//    padding-right: calc(var(--section-gap) / 2);
//  }
//
//  .logo {
//    margin: 0 2rem 0 0;
//  }
//
//  header .wrapper {
//    display: flex;
//    place-items: flex-start;
//    flex-wrap: wrap;
//  }
//
//  nav {
//    text-align: left;
//    margin-left: -1rem;
//    font-size: 1rem;
//
//    padding: 1rem 0;
//    margin-top: 1rem;
//  }
//}
</style>
